<template>
  <div class="goods-detail">
    <main-header></main-header>
    <div class="wrap">
      <main-nav></main-nav>
      <div id="main" class="f-sb-fs">
        <div id="imgs">
          <div id="top" ref="top" class="f-c-c">
            <img ref="bigImg" src="@/public/img/defaultGoods.png" />
            <div id="cover" ref="cover"></div>
            <div id="glass" ref="glass">
              <img ref="largeImg" src="@/public/img/defaultGoods.png" />
            </div>
          </div>
          <div id="bottom" class="f-sb-fs">
            <div
              :class="[ind == imgInd ? 'active' : '', 'img-box']"
              v-for="(item, ind) in 5"
              :key="ind"
            >
              <img
                src="@/public/img/defaultGoods.png"
                @mouseover="showBigImg(ind)"
                @click="showBigImg"
              />
            </div>
          </div>
        </div>
        <div id="info" v-if="detail">
          <div id="base">
            <div id="produce">{{ detail.title }}</div>
            <div id="price" class="f-fs-c">
              <strong>￥{{ totalMoney }}.00</strong>
            </div>
            <div id="reference" class="f-sa-c">
              <div>
                总销量<b>{{ detail.totalSell }}</b
                >部
              </div>
              <div>
                月销量<b>{{ detail.monthSell }}</b
                >部
              </div>
              <div>
                好评率<b>{{ detail.goodRatio }}%</b>
              </div>
              <div>
                总评价<b>{{ detail.totalComment }}</b
                >条
              </div>
              <div class="a" @click="goAnchor('#other')"><b>查看评价</b></div>
            </div>
          </div>
          <div id="config">
            <div class="config-box f-fs-fs">
              <div class="label">机身颜色</div>
              <div class="cont f-fs-c">
                <div
                  class="color f-fs-c box"
                  :class="ind == colorInd ? 'active' : ''"
                  v-for="(color, ind) in colors"
                  :key="ind"
                  @click="clickChangeInd('colorInd', ind)"
                >
                  <img :src="detail.colorImg" />
                  <span>{{ color }}</span>
                </div>
              </div>
            </div>
            <div class="config-box f-fs-fs">
              <div class="label">运行内存</div>
              <div class="cont f-fs-c">
                <div
                  class="store box"
                  :class="ind == ramInd ? 'active' : ''"
                  v-for="(ram, ind) in rams"
                  :key="ind"
                  @click="clickChangeInd('ramInd', ind)"
                >
                  <div>{{ ram }}GB</div>
                </div>
              </div>
            </div>
            <div class="config-box f-fs-fs">
              <div class="label">存储内存</div>
              <div class="cont f-fs-c">
                <div
                  class="store box"
                  :class="ind == romInd ? 'active' : ''"
                  v-for="(rom, ind) in roms"
                  :key="ind"
                  @click="clickChangeInd('romInd', ind)"
                >
                  <div>{{ rom }}GB</div>
                </div>
              </div>
            </div>
            <div class="config-box f-fs-fs">
              <div class="label">套餐类型</div>
              <div class="cont f-fs-c">
                <div
                  class="match box"
                  :class="ind == setMealInd ? 'active' : ''"
                  v-for="(setMeal, ind) in setMeals"
                  :key="ind"
                  @click="clickChangeInd('setMealInd', ind)"
                >
                  {{ `${setMeal.name}(￥${setMeal.price})` }}
                </div>
              </div>
            </div>
            <div class="config-box f-fs-fs">
              <div class="label">数量</div>
              <div class="cont f-fs-c">
                <el-input-number
                  v-model="amount"
                  @change="changeGoodsAmount"
                  :min="1"
                ></el-input-number>
              </div>
            </div>
            <div class="config-box f-fs-fs">
              <div class="label"></div>
              <div class="cont f-fs-c">
                <el-button type="primary" @click="nowBuy">立即购买</el-button>
                <el-button
                  type="primary"
                  class="add-cart-btn"
                  icon="el-icon-shopping-cart-2"
                  @click="shopCartAdd"
                >
                  加入购物车
                  <fly-ball :isShow="isShowBall" :num="amount"></fly-ball>
                </el-button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <el-tabs id="other" v-model="activeName" type="border-card" v-if="detail">
        <el-tab-pane label="规格参数" name="parameter" id="parameter">
          <table
            class="brief-table"
            v-for="(arr, ind) in detail.parameter"
            :key="ind"
          >
            <caption>
              {{
                arr.title
              }}
            </caption>
            <tbody>
              <tr v-for="(item, ind) in arr.data" :key="ind">
                <td>{{ item.text }}</td>
                <td>{{ item.desc }}</td>
              </tr>
            </tbody>
          </table>
        </el-tab-pane>
        <el-tab-pane label="套餐清单" name="setMeal" id="set-meal">
          <table
            class="brief-table"
            v-for="setMeal in setMeals"
            :key="setMeal.id"
          >
            <caption>
              {{
                `${setMeal.name}(￥${setMeal.price}.00)`
              }}
            </caption>
            <tbody>
              <tr v-for="cont in setMeal.conts" :key="cont.id">
                <td>{{ cont.name }}</td>
                <td>{{ cont.num }}</td>
              </tr>
            </tbody>
          </table>
        </el-tab-pane>
        <el-tab-pane
          label="用户评价"
          name="evaluate"
          id="evaluate"
          v-if="comment"
        >
          <div id="head" class="f-fs-fs">
            <div id="left">
              <h2>{{ comment.avgStars }}<i class="el-icon-star-on"></i></h2>
              <div>平均满意度</div>
            </div>
            <div id="right" class="f-fe-fs-c">
              <div id="tags">
                <el-button
                  :size="starsNum == item.code ? 'medium' : 'mini'"
                  type="primary"
                  effect="dark"
                  v-for="(item, ind) in commentStars"
                  :key="ind"
                  @click="changeStars(item.code)"
                >
                  {{ `${item.text}(${item.code})` }}
                </el-button>
                <!-- <el-button
                  :size="starsNum == item.code ? 'medium' : 'mini'"
                  type="danger"
                  effect="dark"
                  v-for="(item, ind) in commentStars"
                  :key="ind"
                  @click="changeStars(item.code)"
                >
                  {{ `${item.text}(${comment.count[ind].total})` }}
                </el-button> -->
              </div>
              <div>
                <el-radio
                  v-model="commentType"
                  label="all"
                  @change="getGoodsCommentByType('all')"
                  >全部</el-radio
                >
                <el-radio
                  v-model="commentType"
                  label="img"
                  @change="getGoodsCommentByType('hasImg')"
                  >有图</el-radio
                >
                <el-radio
                  v-model="commentType"
                  label="cont"
                  @change="getGoodsCommentByType('hasCont')"
                  >有内容</el-radio
                >
              </div>
            </div>
          </div>
          <line-comment
            v-for="(row, ind) in commentRows"
            :key="ind"
            :row="row"
          ></line-comment>
          <div id="page">
            <el-pagination
              @size-change="sizeChange"
              @current-change="currChange"
              :current-page="currPage"
              :page-sizes="[5, 10, 15, 20]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              background
            >
            </el-pagination>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
import MainHeader from "../components/section/MainHeader.vue";
import MainNav from "../components/section/MainNav.vue";
import LineComment from "../components/side/LineComment.vue";
import FlyBall from "../components/side/FlyBall.vue";
import { magnifyingGlass } from "@/front/assets/js/view.js";
import { getGoodsDetail, getGoodsComment } from "../assets/api/goods.js";
// import { throttle } from "../../public/js/utility.js";
export default {
  name: "Detail",
  components: {
    MainHeader,
    MainNav,
    FlyBall,
    LineComment,
  },
  data() {
    return {
      goodsId: 0,
      detail: {},
      colors: [],
      rams: [],
      roms: [],
      imgs: [],
      prices: [],
      amount: 1,
      imgInd: 0,
      colorInd: 0,
      ramInd: 0,
      romInd: 0,
      setMealInd: 0,
      comment: {},
      commentRows: [],
      total: 0,
      currPage: 1,
      pageSize: 10,
      stars: [0, 1, 2, 3, 4, 5],
      hasCont: null,
      hasImg: null,
      activeName: "evaluate",
      commentType: "all",
      starsNum: 5,
      isShowBall: false,
    };
  },
  computed: {
    setMeals() {
      return this.$store.state.opts.setMeals;
    },
    commentStars() {
      console.log(this.$store.state.dicts.commentStars);
      return this.$store.state.dicts.commentStars;
    },
    totalMoney() {
      return 10;
      // let { prices, priceInd, setMeals, setMealInd, amount } = this;
      // console.log(prices, priceInd, setMeals, setMealInd, amount)
      // return (prices[priceInd] + setMeals[setMealInd].price) * amount;
    },
    // priceInd() {
    //   return this.ramInd * this.rams.length + this.romInd;
    // },
    // prices() {
    //   return this.detail
    //     ? this.detail.price.split(";").map((item) => parseInt(item))
    //     : [];
    // },
    // colors() {
    //   return this.detail ? this.detail.base_color.split(";") : [];
    // },
    // rams() {
    //   return this.detail ? this.detail.store_ram.split(";") : [];
    // },
    // roms() {
    //   return this.detail ? this.detail.store_rom.split(";") : [];
    // },
  },
  methods: {
    goAnchor(ele) {
      this.$el.querySelector(ele).scrollIntoView();
    },
    async init() {
      let { goodsId} = this;
      this.detail = await getGoodsDetail({ goodsId });
      let { color, imgs, ram, rom, price } = this.detail;
      this.colors = color.split(",");
      this.imgs = imgs.split(",");
      this.rams = ram.split(",");
      this.roms = rom.split(",");
      this.prices = price.split(",");
      // this.getCommentByGoodsId("all");
      this.getGoodsComment();
    },
    clickChangeInd(key, ind) {
      this[key] = ind;
    },
    changeStars(num) {
      this.starsNum = num;
      this.stars=[num];
      this.getGoodsComment();
    },
    async getGoodsComment(){
      let { goodsId, currPage, pageSize, stars, hasCont, hasImg } = this;
      this.comment = await getGoodsComment({
        goodsId,
        currPage,
        pageSize,
        stars,
        hasCont,
        hasImg,
      });
      this.commentRows=this.comment.rows;
      this.total = this.comment.total;
      console.log(this.comment.rows);
    },
    getGoodsCommentByType(type){
      if(type=="all"){
        this.hasCont=null;
        this.hasImg=null;
      }else{
        this[type]=true;
      }
      this.getGoodsComment();
    },
    // getGoodsDetail() {
    //   this.$axios
    //     .get("/data/getGoodsDetail", {
    //       params: {
    //         goodsId: this.goodsId,
    //       },
    //     })
    //     .then((res) => {
    //       console.log(res.data.data);
    //       this.detail = res.data.data;
    //     })
    //     .catch((err) => {});
    // },
    // getCommentByGoodsId() {
    //   let { goodsId, starsNum, commentType, currPage, pageSize } = this;
    //   this.$axios
    //     .get("/data/getCommentByGoodsId", {
    //       params: {
    //         goodsId,
    //         stars: starsNum,
    //         type: commentType,
    //         currPage,
    //         pageSize,
    //       },
    //     })
    //     .then((res) => {
    //       this.comment = res.data.data;
    //       this.total = this.comment.total;
    //     })
    //     .catch((err) => {});
    // },
    showBigImg(ind) {
      this.imgInd = ind;
    },
    changeGoodsAmount(val) {
      this.amount=val
    },
    currChange(val) {
      this.currPage = val;
      this.getGoodsComment()
    },
    sizeChange(val) {
      this.pageSize = val;
      this.getGoodsComment()
    },
    shopCartAdd(e) {
      // let {
      //   goodsId,
      //   $store,
      //   amount,
      //   colors,
      //   colorInd,
      //   rams,
      //   roms,
      //   ramInd,
      //   romInd,
      //   setMealInd,
      // } = this;
      // let userId = $store.state.userInfo.id;
      // if ($store.state.isAddFinish) {
      //   $store.commit("changeAddFinish", false);
      //   $store.commit("changeShowBall", true);
      //   this.$axios
      //     .post("/data/shopCartAdd", {
      //       goodsId,
      //       userId,
      //       amount,
      //       color: colors[colorInd],
      //       store: `${rams[ramInd]}+${roms[romInd]}`,
      //       setMeal: setMealInd,
      //     })
      //     .then((res) => {
      //       console.log(res.data);
      //       let { code, msg } = res.data;
      //       let key = "success";
      //       code != 1 && (key = "error");
      //       this.$message[key](msg);
      //       let num = this.$store.state.userInfo.shop_car + this.amount;
      //       this.$set(this.$store.state.userInfo, "shop_car", num);
      //     })
      //     .catch((err) => {
      //       console.log(err);
      //     });
      // }
    },
    nowBuy() {
      //   let {
      //     goodsId,
      //     colors,
      //     colorInd,
      //     rams,
      //     ramInd,
      //     roms,
      //     romInd,
      //     setMeals,
      //     setMealInd,
      //     amount,
      //     prices,
      //     priceInd,
      //     detail,
      //   } = this;
      //   let goods = {
      //     id: goodsId,
      //     color: colors[colorInd],
      //     ram: rams[ramInd],
      //     rom: roms[romInd],
      //     setMeal: setMeals[setMealInd],
      //     amount: amount,
      //     price: prices[priceInd],
      //     title: detail.title,
      //   };
      //   this.$router.push("/confirm_order");
      //   sessionStorage.setItem("goods", JSON.stringify([goods]));
    },
  },
  created() {
    this.goodsId = this.$route.params.id;
    this.init();
  },
  mounted() {
    magnifyingGlass(this.$refs.top, this.$refs.cover, this.$refs.largeImg);
  },
};
</script>
<style lang="scss" scoped>
.active {
  border: 2px solid $theme-color !important;
}
.main-header {
  margin-bottom: 20px;
}
#logo {
  height: 60px;
}
#main {
  padding: 20px 0;
}
#imgs {
  flex-wrap: wrap;
  width: 504px;
}
#top {
  position: relative;
  width: 500px;
  height: 500px;
  border-radius: $border-radius-base;
  border: 2px solid $border-color-base;
  img {
    width: 100%;
    height: 100%;
  }
  #cover {
    display: none;
    cursor: move;
    position: absolute;
    height: 250px;
    width: 250px;
    background: rgba(0, 0, 0, 0.2);
  }
  #glass {
    display: none;
    position: absolute;
    left: 520px;
    width: 100%;
    height: 100%;
    border-radius: $border-radius-base;
    border: 2px solid $border-color-base;
    background: #ffffff;
    z-index: 100;
    overflow: hidden;
    img {
      position: absolute;
      width: 1000px;
      height: 1000px;
    }
  }
  &:hover {
    #cover,
    #glass {
      display: block;
    }
  }
}
#bottom {
  margin: 15px 0;
  .img-box {
    height: 96px;
    width: 96px;
    border-radius: $border-radius-base;
    box-sizing: border-box;
    border: 2px solid $border-color-base;
    &:hover {
      border: 2px solid $theme-color;
    }
    img {
      height: 100%;
      width: 100%;
    }
  }
}
#info {
  width: 670px;
  #base {
    border-radius: $border-radius-base;
    margin-bottom: 30px;
    border: 1px solid $border-color-base;
    background: $background-color-base;
    > div {
      padding: 6px 10px;
    }
    #produce {
      @include text-ellipsis(2);
      font-size: 20px;
      font-weight: bold;
      height: 60px;
      line-height: 30px;
    }
    #price {
      background: #ffffff;
      strong {
        color: #ff0036;
        font-size: 34px;
      }
    }
    #reference {
      font-size: 14px;
      text-align: center;
      b {
        color: $theme-color;
      }
    }
  }
  #config {
    .config-box {
      margin: 15px 0;
    }
    .label {
      color: $color-text-regular;
      text-align: right;
      width: 70px;
      line-height: 40px;
      margin-right: 20px;
    }
    .cont {
      flex-wrap: wrap;
      width: 580px;
      .box {
        cursor: pointer;
        margin: 0 6px 6px 0;
        border-radius: $border-radius-base;
        box-sizing: border-box;
        overflow: hidden;
        border: 2px solid $border-color-base;
        &:hover {
          background: $background-color-base;
        }
      }
      .color {
        img {
          height: 50px;
        }
        span {
          font-size: 14px;
          padding-right: 10px;
          margin-left: 5px;
          max-width: 70px;
        }
      }
      .store,
      .match {
        line-height: 40px;
        padding: 0 10px;
      }
    }
  }
}
#other {
  border-radius: $border-radius-base;
  margin-bottom: 30px;
  overflow: hidden;
}
#head {
  height: 70px;
  margin-bottom: 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid $theme-color;
}
#left {
  text-align: center;
  margin-right: 20px;
  div {
    color: $background-color-base;
    font-size: 14px;
  }
  h2 {
    font-size: 40px;
    height: 50px;
    padding: 0 20px;
    color: $theme-color;
  }
}
#right {
  height: 100%;
  #tags {
    margin-bottom: 10px;
  }
}
#page {
  text-align: center;
  padding: 10px 0;
}
</style>